script(src="/js/chart.bundle.min.js", integrity="sha384-qgOtiGNaHh9fVWUnRjyHlV39rfbDcvPPkEzL1RHvsHKbuqUqM6uybNuVnghY2z4/")

canvas.mb-3(id=graphData.id)

if (session.uiTheme && session.uiTheme == "dark")
	script.
		Chart.defaults.global.defaultFontColor='white';
else
	script.
		Chart.defaults.global.defaultFontColor='black';


script.
	Chart.defaults.global.elements.point.radius = 1;
	var ctx = document.getElementById("#{graphData.id}").getContext('2d');
	var graph = new Chart(ctx, {
		type: 'line',
		labels: [#{graphData.labels}],
		data: {
			datasets: [{
				borderColor: '#007bff',
				borderWidth: 2,
				backgroundColor: 'rgba(0,0,0,0)',
				data: #{graphData.dataVar},
			}]
		},
		options: {
			animation:{
				duration:0
			},
			title: {
				display: false,
				text: '#{graphData.title}'
			},
			legend: {
				display: false
			},
			scales: {
				xAxes: [{
					type: 'linear',
					position: 'bottom',
					scaleLabel: {
						display: true,
						labelString: '#{graphData.xaxisTitle}'
					},
					ticks: {
						stepSize: #{graphData.xaxisStep},
						/*callback: function(value, index, values) {
							if (value > 1000000) {
								return (value / 1000000).toLocaleString() + "M";

							} else if (value > 1000) {
								return (value / 1000).toLocaleString() + "k";

							} else {
								return value;
							}
						}*/
					}
				}],
				yAxes: [{
					scaleLabel: {
						display: true,
						labelString: '#{graphData.yaxisTitle}'
					},
					ticks: {
						callback: function(value, index, values) {
							if (value > 1000000) {
								return (value / 1000000).toLocaleString() + "M";

							} else {
								return value;
							}
						}
					}
				}]
			}
		}
	});